<template>
  <div class="result-card">
    <Card :bordered="cardBorder" :padding="cardPadding" :dis-hover="cardHover">
      <p slot="title">
        <Icon type="ios-person" />个人信息
      </p>
      <CellGroup>
        <Cell
          v-for="(item, index) in infoList"
          :title="item.field"
          :extra="item.value"
          :key="index"
        />
      </CellGroup>
    </Card>

    <Card :bordered="cardBorder" :padding="cardPadding" :dis-hover="cardHover" class="result-card">
      <p slot="title">
        <Icon type="ios-color-palette" />其它信息
      </p>
      <Collapse :value="nowPanel" @on-change="checkPanel" :accordion="accordion">
        <Panel name="1">
          舍友信息
          <div slot="content">
            <CellGroup>
              <Cell
                v-for="(item, index) in roommate"
                :title="item.name"
                :label="item.class"
                :extra="item.bed"
                :key="index"
              />
            </CellGroup>
          </div>
        </Panel>
        <Panel name="2">
          <span>班级性别比例</span>
          <div slot="content">
            <canvas id="sexChart" width="400" height="260"></canvas>
          </div>
        </Panel>
        <Panel name="3">
          学院微信及新生群
          <div slot="content" class="result-img">
            <p>学院微信：</p>
            <img :src="wechatImg" alt="学院微信" />
            <p>学院新生群：</p>
            <img :src="collegeImg" alt="学院新生群" />
          </div>
        </Panel>
        <Panel name="4">
          级部同名者（{{sameName.count}}人）
          <div slot="content">
            <CellGroup>
              <Cell
                v-for="(item, index) in sameName.info"
                :title="item.college"
                :extra="item.class"
                :label="item.who"
                :key="index"
              />
            </CellGroup>
          </div>
        </Panel>
      </Collapse>
    </Card>

    <Button type="primary" class="re-query" @click="reQuery">重新查询</Button>
  </div>
</template>

<script>
import F2 from "@antv/f2";

export default {
  name: "result",
  data() {
    return {
      infoList: "",
      roommate: "",
      sameName: {
        count: "",
        info: ""
      },
      cardBorder: false,
      cardPadding: 15,
      cardHover: true,
      wechatImg: "",
      collegeImg: "",
      nowPanel: "1",
      accordion: true,
      chartData: [
        {
          sex: "男生",
          percent: "",
          num: "",
          sum: "1"
        },
        {
          sex: "女生",
          percent: "",
          num: "",
          sum: "1"
        }
      ]
    };
  },

  methods: {
    // 检测是否点击第二扩展面板
    checkPanel: function(e) {
      switch (e[0]) {
        case "2":
          this.showChart();
          break;
        case "3":
          this.getImg();
          break;
        default:
          break;
      }
    },

    // 图饼
    showChart: function() {
      // 图例补充数据
      const map = {
        男生: this.chartData[0].num,
        女生: this.chartData[1].num
      };

      // 初始化图饼
      const chart = new F2.Chart({
        id: "sexChart",
        width: 280,
        height: 190,
        pixelRatio: window.devicePixelRatio // 指定分辨率
      });

      // 填入数据
      chart.source(this.chartData, {
        percent: {
          formatter: function(val) {
            return val * 100 + "%";
          }
        }
      });
      chart.coord("polar", {
        transposed: true,
        radius: 1,
        innerRadius: 0.6
      });
      chart.legend({
        position: "right",
        align: "center",
        // 格式化图例的文本（val为图例项的文本值）
        itemFormatter: function(val) {
          return val + " " + map[val] + "人";
        }
      }); // 图例
      chart.axis(false); // 坐标轴
      chart.tooltip(false); // 提示信息
      chart
        .interval()
        .position("sum*percent")
        .color("sex", ["#008aff", "#ff80ab"])
        .adjust("stack")
        .style({
          lineWidth: 1,
          stroke: "#fff",
          lineJoin: "round",
          lineCap: "round"
        })
        .animate({
          appear: {
            duration: 1200,
            delay: 400,
            easing: "bounceOut"
          }
        });
      chart.render();
    },

    // 学院微信和新生群
    getImg: function() {
      const baseUrl = "https://youthlab.sdut.edu.cn/library/college/";
      const college = this.infoList[3].value;

      if (
        college === "美术学院" ||
        college === "体育学院" ||
        college === "农业工程与食品科学学院"
      ) {
        this.wechatImg = `${baseUrl}${college}/wechat.GIF`;
        this.collegeImg = `${baseUrl}${college}/college.png`;
      } else {
        this.wechatImg = `${baseUrl}${college}/wechat.png`;
        this.collegeImg = `${baseUrl}${college}/college.png`;
      }
    },

    // 重新查询
    reQuery: function() {
      localStorage.clear();
      this.$router.replace("/");
    }
  },

  created() {
    const localData = JSON.parse(localStorage.getItem("fresh-data"));

    if (!localData) {
      this.$router.replace("/");
      return;
    }
    // 从本地获取信息

    // 个人信息列表
    this.infoList = [
      {
        field: "姓名",
        value: localData.name
      },
      {
        field: "学号",
        value: localData.sdut_id
      },
      {
        field: "班级",
        value: localData.class
      },
      {
        field: "学院",
        value: localData.college
      },
      {
        field: "专业",
        value: localData.major
      },
      {
        field: "宿舍楼号",
        value: localData.dormitory
      },
      {
        field: "宿舍房间号",
        value: localData.room
      },
      {
        field: "床号",
        value: localData.bed.toString()
      }
    ];
    // 舍友信息
    this.roommate = localData.roommate.map(element => {
      element.bed = element.bed + " 号床";
      return element;
    });
    // 校内同名者
    this.sameName.count = localData.same_name.length - 1;
    this.sameName.info = localData.same_name.map(function(element) {
      if (element.sdut_id === localData.sdut_id) {
        element.who = "我";
      } else {
        element.who = "";
      }
      return element;
    });

    // 填充男女比例
    const sum = localData.countman + localData.countwoman;
    this.chartData[0].num = localData.countman;
    this.chartData[0].percent = localData.countman / sum;
    this.chartData[1].num = localData.countwoman;
    this.chartData[1].percent = localData.countwoman / sum;
  }
};
</script>

<style scoped>
.result-card {
  margin-top: 20px;
}

#sexChart {
  width: 100%;
  height: 200px;
}
.result-img {
  text-align: center;
}
.result-img p {
  text-align: left;
  padding: 5px 0;
}
.result-img img {
  width: 70%;
}
.re-query {
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}
</style>